<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>选择医院</title>
    <link rel="stylesheet" type="text/css" href="__CSS__api.css" />
    <link rel="stylesheet" type="text/css" href="__CSS__aui.css" />
    <link rel="stylesheet" type="text/css" href="__CSS__common.css" />

    <style>
        .aui-bar-nav .aui-iconfont {
            position: relative;
            font-family: "aui_iconfont" !important;
            font-size: 0.75rem;
            color: #E73C5C;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            height: 2.4rem;
        }

        .aui-bar-nav {
            background-color: #fff;
        }

        .aui-icon-tu {
            height: 2.4rem;
            width: 49px;
            background: url('__IMG__left.png') no-repeat 0.5rem center;
            background-size: 22px 22px;
        }

        .aui-bar-nav .aui-pull-right {
            padding-right: 0.75rem;
        }

        .aui-bar-nav .aui-title {
            font-size: 0.9rem;
            color: #333333;
            font-weight: 500;
        }
        body{
            background-color: #ffffff;
        }
        .aui-searchbar {
            display: -webkit-box;
            -webkit-box-pack: center;
            -webkit-box-align: center;
            height: 55px;
            overflow: hidden;
            width: 100%;
            background-color: #ffffff;
            color: #9e9e9e;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        .aui-searchbar-input {
            background-color: #FFFFFF;
            border-radius: 15px;
            height: 29px;
            line-height: 29px;
            font-size: 13px;
            position: relative;
            display: -webkit-box;
            -webkit-box-flex: 1;
            margin-left: 15px;
            margin-right: 15px;
            border: 1px solid #E6E6E6;
            margin-top:4px;
        }

        .aui-searchbar-input input {
            color: #333333;
            width: 100%;
            padding: 0;
            margin: 0;
            height: 29px;
            line-height: normal;
            border: 0;
            -webkit-appearance: none;
            font-size: 13px;
            background-color: #ffffff;
        }

        .aui-searchbar .aui-iconfont {
            line-height: 0.75rem;
            color: #9e9e9e !important;
        }
        .aui-iconfont{
            font-size:12.5px;
            line-height: 29px;
            margin-left:4px;
        }
        .aui-icon-search:before {
            content: '';
            width: 15px;
            height: 1.50rem;
            background: url('__IMG__main1Search.png') no-repeat center center;
            background-size: 15px 15px;
            display: inline-block;
        }
        .cancel {
            /*position: absolute;*/
            /*top: 50%;*/
            /*right: 0.8rem;*/
            /*transform: translateY(-50%);*/
            color: #282828;
            font-size: 0.75rem;
        }

        .city-area {
            position: relative;
            overflow: scroll;
        }

        .city-slide {
            position: fixed;
            right: 0;
            z-index: 10000;
            bottom: 5rem;
            width: 1.225rem;
            background: white;
            overflow-y: scroll;
            padding-top: 0;
        }

        .slide-item {
            padding: 0.15rem 0;
            text-align: center;
            color: #333333;
            background-color: rgba(0, 0, 0, 0);
            font-size: 0.6rem;
            background: white;
        }

        .location {
            background: #ffffff;
            padding-left: 0.8rem;
            padding-top: 0.8rem;
        }

        .location .name {
            color: #999999;
            font-size: 0.7rem;
            margin-bottom: 0.75rem;
        }

        .locate {
            display: inline-flex;
            align-items: center;
            min-width: 2.45rem;
            height: 1.5rem;
            border-radius: 0.875rem;
            background: white;
            position: relative;
            text-align: center;
            margin-right: 0.75rem;
            margin-bottom: 0.75rem;
        }

        .locate:before {
            content: '';
            height: 199%;
            width: 201%;
            position: absolute;
            top: -51%;
            left: -51%;
            border-radius: 1.75rem;
            border: 1px solid #DBDBDB;
            transform: scale(0.5);
            -webkit-transform: scale(0.5);
            -ms-transform: scale(0.5);
            -moz-transform: scale(0.5);
            -o-transform: scale(0.5);
            font-size: 1.1rem;
        }

        .locate1:before {
            content: '';
            height: 199%;
            width: 201%;
            position: absolute;
            top: -51%;
            left: -51%;
            border-radius: 1.75rem;
            border: 1px solid #E0474C;
            transform: scale(0.5);
            -webkit-transform: scale(0.5);
            -ms-transform: scale(0.5);
            -moz-transform: scale(0.5);
            -o-transform: scale(0.5);
            font-size: 1.1rem;
        }

        .icon-location3 {
            /*width: 0.85rem;*/
            height: 0.85rem;
            /*background: url("__IMG__location3.png") center center no-repeat;*/
            background-size: 0.85rem 0.85rem;
            margin-left: 0.25rem;
            margin-right: 0.4rem;
        }

        .city-name {
            color: #3D3D3D;
            font-size: 0.7rem;
            padding-right: 0.5rem;
        }

        .city-name1 {
            color: #E73C5C;
        }

        .item-title {
            color: #3D3D3D;
            font-size: 0.7rem;
            padding-left: 0.8rem;
            height: 2rem;
            line-height: 1.25rem;
            background: #F8F8F8;
        }

        .city-list {
            background-color: white;
            padding-left: 0.8rem;
            padding-right: 1.875rem;
        }

        .city-item {
            height: 2.05rem;
            background-color: white;
            color: #282828;
            font-size: 0.8rem;
            line-height: 2.05rem;
        }

        .choose {
            display: inline-block;
            font-size: 0.8rem;
            color: #282828;
            /*margin-left: 0.5rem;*/
        }

        .qgx {
            width: 100%;
            height: 1px;
            background: #DBDBDB;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5)
        }

        .qgx2 {
            position: absolute;
            top: 2.3rem;
            left: 0;
            z-index: 10000;
        }

        .icon_pic {
            width: 0.8rem;
            height: 0.8rem;
            /*background: url("__IMG__location3.png") no-repeat ;*/
            background-size: 100%;
            margin-top: 0.8rem;
        }

        .dingwei {
            float: left;
        }

        .font {
            color: #B3B3B3;
            font-size: 0.6rem;
            line-height: 2.65rem;
            margin-left: 0.5rem;
        }
        input[type="text"], input[type="password"], input[type="tel"] {
            width: 91.6%;
            height: 1.5rem;
            color: #010101;
            background-color: #FFFFFF;
            outline: none;
            font-size: 0.65rem;
            font-weight: 600;
            margin-left: 0.75rem;
            padding-left: 1.75rem;
            line-height:0.75rem;
            border-radius:0.75rem;
            border:1px solid rgba(230,230,230,1);
        }
        .fudong{
            position: absolute;
            top:4.3rem;
            left:1.5rem;
        }
    </style>
</head>

<body>
<div class="l_box"  id="loading2"><img src="__IMG__loading.gif" alt="" id="loading"></div>

<header class="aui-bar aui-bar-nav underLine" style="padding-top:25px;" id="header">
    <a class="aui-pull-left" tapmode="active" onclick="history.go(-1)"> <span class="aui-iconfont aui-icon-tu"> </span> </a>
    <div class="aui-title">选择医院</div>
</header>
<div id="header">
    <div class="aui-searchbar"  id="search">
        <input type="text" name="" placeholder="输入医院名" oninput="changekey(this)">
        <span class="aui-icon-search fudong"></span>
    </div>
</div>
<div class="sousuo">

</div>
<div class="city-area" style="flex: 1;">
    <div class="city-slide" id="render-item-1"></div>
    <div id="render-item-2">

    </div>
</div>
</div>
<div class="toast-wrap">
    <span class="toast-msg"></span>
</div>
</body>

<script type="text/javascript" src="__JS__api.js"></script>
<script type="text/javascript" src="__JS__tt.js"></script>
<script type="text/javascript" src="__JS__pinyin_dict_firstletter.js"></script>
<script type="text/javascript" src="__JS__pinyinUtil.js"></script>
<script type="text/javascript" src="__JS__jquery.min.js"></script>
<script type="text/javascript" src="__JS__common.js"></script>

<script type="text/javascript">
    var yiyauan,keshi,zhicheng,zhiwu;
    getUrlParam11();
    // 解析上个页面传来的参数
    function getUrlParam11() {
        var urlname=window.location.search;
        if (urlname.indexOf("?") != -1) {
            yiyauan=decodeURI(urlname.split('=')[1]);
            keshi=decodeURI(urlname.split('=')[2]);
            zhicheng=decodeURI(urlname.split('=')[3]);
            zhiwu=decodeURI(urlname.split('=')[4]);


        }else {
            return null;
        }
    }
    window.onload = function () {
        initData();
    };
    // 关键字查询
    function changekey(keyobj) {
        if ($.trim(keyobj.value)=='') {
            $('.sousuo').html('');
            return;
        }
        loaddingOpen();
        var data2={
            key:keyobj.value,
            type:1
        };
        $.ajax({
            url:'{:url("My/getHospital")}',
            data:data2,//
            type:'POST',
            dataType:'JSON',
            success: function(data){
                loaddingClose();
                console.log(data);

                if (data.status=='200') {
                    var html='';
                    html+='<div class="city-list">';
                    for (var i=0;i<data.data.length;i++) {
                        html+='<div class="city-item underLine aaa" data-id='+data.data[i].assortment_id+' tapmode onclick="choose_city(this)">'+data.data[i].name+'</div>';
                    }
                    html+='</div>';

                    $('.sousuo').html(html);
                }else {
                    toast(data.msg);
                }

            },
            error: function(xhr, type){
                loaddingClose();

                toast('无网络或连接超时，请重试！');
                // 即使加载出错，也得重置

            }
        });

    }

    function render_jigou(data){
        var html="";
        var arr1=data[0];
        var arr2=data[1];
        for(var i=0;i<arr1.length;i++){
            html+='<div class="item">';
            html+='<div class="item-title" style="background-color:#F5F5F5;height:1.25rem;" data-name='+arr1[i]+'>'+arr1[i]+'</div>';
            html+='<div class="city-list">';
            for(var j=0;j<arr2[arr1[i]].length;j++){
                html+='<div class="city-item underLine aaa" data-id='+arr2[arr1[i]][j].assortment_id+' tapmode onclick="choose_city(this)">'+arr2[arr1[i]][j].name+'</div>';
            }
            html+='</div></div>';
        }
        return html;
    }

    //获取机构名或id，返回上个页面
    function choose_city(A) {
        var data2={
            hospital:A.dataset.id,
            department:keshi,
            title:zhicheng,
            duty:zhiwu,

        };
        $.ajax({
            url:'{:url("My/approveSecond")}',
            data:data2,
            type:'POST',
            dataType:'JSON',
            success: function(data){
                if (data.status=='200') {
                    toast('保存成功');

                     location.href='{:url("My/zhiyuanzhe_renzheng2")}';
                }else {
                    toast(data.msg);
                }

            },
            error: function(xhr, type){
                toast('无网络或连接超时，请重试！');
                // 即使加载出错，也得重置

            }
        });
    }
    function render_zimu(data){
        var html="";
        var arr1=data[0];
        for(var i=0;i<arr1.length;i++){
            html+='<div class="slide-item" tapmode onclick="scrollToTag(\''+arr1[i]+'\')">'+arr1[i]+'</div>'
        }
        return html;
    }
    window.onload = function () {
        initData();
    };

    var json = {
        'citys': []
    }; //存储本页需要得dot数据

    var dz_json; //接口返回得完整得地址数据
    var getValue;
    var obj = {};
    function initData () {
        loaddingOpen();
        var data2={
            key:'',
            type:1
        };
        $.ajax({
            url:'{:url("My/getHospital")}',
            data:data2,
            type:'POST',
            dataType:'JSON',
            success: function(data){
                loaddingClose();
                console.log(data);
                //
                if (data.status=='200') {
                    dz_json = data.data;
                    for (var i = 0; i < dz_json.length; i++) {
                        var strtype=parseInt(dz_json[i].name);
                        if (isNaN(strtype)){
                            json.citys.push(dz_json[i]);

                        }
                    }

                    control_json(); //渲染城市列表

                }else {
                    toast(data.msg);
                }

            },
            error: function(xhr, type){
                loaddingClose();

                toast('无网络或连接超时，请重试！');
                // 即使加载出错，也得重置

            }
        });

        // dz_json = a.data;
        //
        // for (var i = 0; i < a.data.length; i++) {
        //     json.citys.push(a.data[i].shi);
        // }
        // control_json(); //渲染城市列表

//默认值展示
// var now_city = $api.getStorage('now_city');
// if (now_city.indexOf("市") >= 0) {
//     now_city = now_city.replace("市", "");
// }
// $api.byId('now_city').innerHTML = now_city;
//默认值展示

// } else {
//     api.toast({
//         msg: data.msg,
//         duration: 2000,
//         location: 'middle'
//     });
// }
// }, function(errorData) {
//     //失败执行函数
// });
    }

    function control_json () {

        for (var i = 0; i < json.citys.length; i++) {
            var key = pinyinUtil.getFirstLetter(json.citys[i].name[0]);

            if (obj[key]) {
                obj[key].push(json.citys[i]);
            } else {
                obj[key] = [];
                obj[key].push(json.citys[i]);
            }
        }

        var keysArr = Object.keys(obj).sort();
        var renderData = [];
        renderData[0] = keysArr;
        renderData[1] = obj;
        $api.html($api.byId('render-item-1'), render_zimu(renderData));
        $api.html($api.byId('render-item-2'), render_jigou(renderData));
    }
    //跳转到指定页面
    function scrollToTag (tag) {
        var title2=document.getElementsByClassName('item-title');
        for(var i=0;i<title2.length;i++){
            if (title2[i].dataset.name==tag)  {
                console.log(tag);
                title2[i].scrollIntoView(true);
            }
        }

    }
</script>


</html>
